<script lang='ts' setup>

const { item } = defineProps<{ item: { name: string, desc: string } }>()

const emits = defineEmits([
    "click"
])

const toDetail = () => {
    emits("click")
}
</script>
<template>
    <div
        class="transform transition duration-300 hover:scale-110 rounded-lg shadow-lg w-56 hover:shadow-xl bg-white p-2 mr-5 mb-10">
        <div class="bg-gradient-to-br from-rose-100 via-purple-200 to-purple-200 h-30 rounded-lg"></div>
        <div class="px-5 pt-2 flex flex-col">
            <h2 class="font-semibold">{{ item.name }}</h2>

            <p class="mb-2 text-sm">{{ item.desc }}</p>

            <button
                class="bg-blue-500 cursor-pointer text-white text-sm px-2 py-1 mt-2 rounded-md transition duration-150 hover:bg-blue-700"
                type="button" @click="toDetail">
                参加活动
            </button>
        </div>

    </div>
</template>
<style lang='scss' scoped></style>